<template>
  <div class="layout">
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <HeaderBar></HeaderBar>
      </el-header>
      <!-- 左侧导航栏 -->
      <el-container class="conent">
        <el-aside width="200px">
          <el-menu
            :default-active="activePath"
            background-color="#fff"
            router
            @select="handleSelect"
          >
          <el-menu-item
            :index="item.path"
            v-for="item in commenLiet"
            :key="item.path"
            :disabled="item.Login && !isLogin"
          >
            <i :class="iconObj[item.id]" ></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
            <el-menu-item-group>
              <template slot="title">我的音乐 </template>
              <el-menu-item
              :index="item.path"
              v-for="item in myList"
              :key="item.path"
              :disabled="item.Login && !isLogin"
              >
              <i :class="iconObj[item.id]" ></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group v-if="isLogin">
              <template slot="title">创建的歌单</template>
              <el-menu-item
                :index="subPath(item.id)"
                @click="toDetail"
                v-for="item in creatPlayList"
                :key="item.id"
              >
                <div slot="title" class="text-hidden">
                  <i class="iconfont icon-gedan"></i>{{item.name}}
                </div>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group v-if="isLogin">
              <template slot="title">收藏的歌单</template>
              <el-menu-item
              :index="subPath(item.id)"
              @click="toDetail"
                v-for="item in subPlyayList"
                :key="item.id"
              >
                <div slot="title" class="text-hidden">
                  <i class="iconfont icon-gedan"></i>{{item.name}}
                </div>
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <div class="footer">
          <FooterBar></FooterBar>
        </div>
    </el-container>
   
  </div>
</template>

<script>
import HeaderBar from "../../components/header/HeaderBar.vue";
import FooterBar from "../../components/footer/FooterBar.vue"
import { mapState , mapGetters } from "vuex";
import router from '@/router';
export default {
  components: {
    HeaderBar,
    FooterBar
  },
  data() {
    return {
        // 菜单导航栏数据
        menuList:[
        { path: '/discover', title: '发现音乐', Login: false, type: 0,id: 0 },
        { path: '/recomsongs', title: '每日推荐', Login: true, type: 1 ,id:1},
        { path: '/video', title: '视频', Login: false, type: 0 , id : 2 },
        { path: '/personalfm', title: '私人FM', Login: true, type: 0 , id :3},
        { path: '/historyplay', title: '最近播放', Login: false, type: 1 , id : 4},
        { path: '/subscribe', title: '我的收藏', Login: true, type: 1 , id: 5}
        ],
        //icon图标对象
        iconObj:{
          0 : 'el-icon-thumb',
          1 : 'el-icon-discount',
          2 : 'el-icon-video-play',
          3 : 'el-icon-headset',
          4 : 'el-icon-finished',
          5 : 'el-icon-collection-tag'
        },
        //当前默认选中的menu
        activePath:''
    };
  },
  created(){
    if(window.sessionStorage.getItem('activePath'))
      this.activePath = window.sessionStorage.getItem('activePath');
  },  
  computed:{
    ...mapState([
      'isLogin','profile'
    ]),
    //创建收藏的歌单
    ...mapGetters([
      'creatPlayList','subPlyayList','userId'
    ]),
    // 共有菜单
    commenLiet(){
      return this.menuList.filter(item => item.type == 0);
    },
    // 我的菜单
    myList(){
      return this.menuList.filter(item => item.type == 1)
    },
  },
  watch: {
      '$route.path'(val){
        this.activePath = val;
      }
    },
  methods:{
    //保存当前选中
    handleSelect(key,keyPath){
      window.sessionStorage.setItem('activePath',key)
    },
    subPath(id){
      if(typeof id === 'number') return `/playlistdetail/${id}`;
    },
    toDetail(){
      location.reload(true);
    }
  },
};
</script>

<style lang="less" scoped>
.layout{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #ff2727;
  height: 60px;
  width: 100%;
  color: #fff;
}
.el-menu-item{
  height: 40px;
  line-height: 40px;
}
.el-menu-item:hover{
  font-size: 16px;
  color: #ff2727 !important;
  border-left: 2px solid;
}
.el-menu-item.is-active {
  font-size: 16px;
  color: #ff2727;
  border-left: 2px solid;
}
.conent{
  height: calc(100vh - 90px);
}
.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 100%;
}
</style>